<template>
  <div>
    <div style="margin: 0 auto;width: 100%">


      <div class="content-header">
        <h1>工务段管理</h1>
      </div>
      <div class="filter-container">
        <el-input placeholder="请输入工务段" v-model="searchData" style="width: 150px;padding:10px"
                  class="filter-item"></el-input>
        <!--      <el-select v-model="pagination.nClass" placeholder="选择消息类型" style="float: left;width: 200px;padding:20px">-->
        <!--        <el-option label="全部消息" value="1"></el-option>-->
        <!--        <el-option label="新闻" value="2"></el-option>-->
        <!--        <el-option label="通知" value="3"></el-option>-->
        <!--        <el-option label="重要信息" value="4"></el-option>-->
        <!--      </el-select>-->
        <el-button @click="filterData" class="dalfBut">查询</el-button>
        <el-button type="primary" class="butT" @click="add = true">新建</el-button>
        <el-button @click="fromCommit()" style="position: relative;margin-left: 570px" type="danger">删除选中项</el-button>

      </div>

      <div>
        <el-table
            :data="tableData.filter(data => !search || data.segment.toLowerCase().includes(search.toLowerCase()))"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
            height="450px">
          <el-table-column
              type="selection"
              style="margin-right: 100px"
              width="100">
          </el-table-column>
          <el-table-column
              label="序号"
              type="index"
              width="350">
          </el-table-column>
          <el-table-column
              label="工务段"
              prop="segment"
              width="500">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <div>
        <el-dialog title="添加工务段" :visible.sync="add" width="40%">
          <el-form :model="addName" ref="ruleForm" label-width="50px" class="demo-ruleForm" :rules="formRule">
            <el-form-item prop="addName" >
          <el-input placeholder="请输入工务段" v-model="addName" style="width: 150px;padding: 15px"
                    class="filter-item"></el-input>
            </el-form-item>
          </el-form>
          <el-button @click="add = false">取 消</el-button>
          <el-button @click="handleAdd" class="dalfBut" type="primary">添加</el-button>
        </el-dialog>
      </div>

      <div>
        <el-dialog title="编辑工务段" :visible.sync="update" width="40%">
          <el-input placeholder="请输工务段" v-model="updateData" style="width: 150px;padding: 15px"
                    class="filter-item"></el-input>
          <el-button @click="update = false">取 消</el-button>
          <el-button @click="handleUpdate" class="dalfBut" type="primary">确定</el-button>
        </el-dialog>
      </div>


      <!--分页组件-->
      <div class="pagination-container" style="padding-top: 10px">
        <el-pagination
            class="pagiantion"

            @current-change="handleCurrentChange"

            :current-page="pagination.currentPage"

            :page-size="pagination.pageSize"

            layout="total, prev, pager, next, jumper"

            :total="pagination.total">

        </el-pagination>

      </div>


    </div>

  </div>
</template>
<script>
export default {
  name: 'PblicWorksSection',
  data() {
    return {
      formRule: {
        addlinename: [
          {required: true, message: '请输入线名', trigger: 'blur'},
        ],
      },
      updateData: '',
      addName: '',
      oldUpdateData: '',
      add: false,
      update: false,
      searchData: '',
      search: '',
      tableData: [],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 7,//总记录数
        segment: ''
      },
      dialogFormVisible: false,

      multipleSelection: []
    }
  },
  methods: {
    handleDelete(row) {
      this.$axios.post("/segment/deleteSegment?list=" + row.sId).then(
          (res) => {
            if (res.data.code === 200) {
              this.$message.success("删除成功");
            } else {
              this.$message.error("删除失败!");
            }
          }
      ).finally(() =>{
        this.getAll()
      })
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    fromCommit() {
      var param = ''
      for (var i = 0; i < this.multipleSelection.length; i++) {
        param += this.multipleSelection[i].sId + ','
      }

      this.$confirm("此操作永久删除当前信息，是否继续？", "提示", {type: "info"}).then(() => {
        this.$axios.post("/segment/deleteSegment?list=" + param).then(
            (res) => {
              if (res.data.code === 200) {
                this.$message.success("删除成功");
              } else {
                this.$message.error("删除失败!");
              }
            }
        )
        this.getAll();
      }).catch(() => {
        this.$message.info("取消操作");
      });
    },
    //delete修改过,建议重写
    deleteCategory(id) {
      var param = {};
      if (id == null) {
        param = {data: this.categoryIdList};
      } else {
        param = {data: [id]};
      }
      this.axios.delete("/api/admin/categories", param).then(({data}) => {
        if (data.flag) {
          this.$notify.success({
            title: "成功",
            message: data.message
          });
          this.listCategories();
        } else {
          this.$notify.error({
            title: "失败",
            message: data.message
          });
        }
        this.isDelete = false;
      });
    },
    // 编辑回显
    handleEdit(index, row) {
      this.oldUpdateData = row.segment
      this.updateData = row.segment
      this.update = true
    },

    //获取所有消息
    getAll() {
      //发送异步请求
      this.$axios.get("/segment/segmentList?curpage=" + this.pagination.currentPage + "&pagesize=" + this.pagination.pageSize).then((res) => {
        this.pagination.total = res.data.data.data.total;
        this.tableData = res.data.data.data.records;
      });
    },
    //切换页码
    handleCurrentChange(currentPage) {
      //修改页码值为当前选中的页码值
      this.pagination.currentPage = currentPage;
      //执行查询
      this.getAll();
    },
    //提交编辑
    handleUpdate() {
      if(this.updateData === null || this.updateData ===''){
        this.$message.error('请输入工务段');
        return
      }
      if(this.updateData.length>30){
        this.$message.error('请线名限制30个字符以内');
        return
      }
      this.$axios.post("/segment/modifySegment?segment=" + this.oldUpdateData + "&segmentname=" + this.updateData).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("修改成功！")
        } else if (res.data.code === 400){
          this.$message.error("该工务段已存在")
        }else if (res.data.code === 500) {
          this.$message.error("服务器错误，请联系管理员")
        } else {
          this.$message.error("修改失败！")
        }
      }).finally(() => {
        //2.重新加载数据
        this.getAll();
        this.update = false
      });
    },
    filterData() {
      let a = this.searchData;
      this.search = a;
    },
    handleAdd() {
      if(this.addName === null || this.addName ===''){
        this.$message.error('请输入线名');
        return
      }
      if(this.addName.length>30){
        this.$message.error('请工务段名限制30个字符以内');
        return
      }
      this.$axios.post("/segment/addSegment?segment=" + this.addName).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("修改成功！")
        } else if (res.data.code === 500) {
          this.$message.error("服务器错误，请联系管理员")
        } else {
          this.$message.error("修改失败！")
        }
      }).finally(() => {
        //2.重新加载数据
        this.getAll();
        this.add = false
      });
    }
  },
  mounted() {
    this.getAll();
  }
}

</script>

